<template>
  <div class="details">
    <Navbar></Navbar>
    <Topper></Topper>
    <List></List>

    <div class="big_flower_details">
      <hr />
      <p>
        <Breadcrumb></Breadcrumb>
      </p>
      <div class="flower_details">
        <el-image class="flower-image" style="width: 500px; height: 500px; display: block" :src="flowerForm.flowerImg">
        </el-image>
        <div class="flower_description">
          <span>{{ flowerForm.flowerName }}</span>
          <hr />
          <div>
            描述：
            <p>{{ flowerForm.flowerDescription }}</p>
          </div>
          <div>价格：{{ flowerForm.flowerPrice }}</div>
          <div>库存：{{ flowerForm.flowerStock }}</div>
          <div>上架时间：{{ flowerForm.createTime }}</div>
          <div>
            数量： <button @click="number--">-</button>&nbsp;{{ number }}
            <button @click="number++">+</button>

          </div>
          <p class="buy">
            <el-button plain size="medium" class="buy" @click="addCart()"> 加入购物车</el-button>
            <el-button type="warning" size="medium" class="buy" @click="toBuy()">立即购买</el-button>
          </p>

        </div>
      </div>
      <div class="flower_img">
        <div class="lower_nav">
          <span>产品详情</span>



        </div>

        <div class="main_img">
          <hr>
          <img :src="this.flowerForm.flowerDetail">
          <!-- <img src="https://upyun.dinghuale.com/uploads/20230216/202302161317136978.jpg"> -->
          <img src="https://upyun.dinghuale.com/uploads/20230216/202302161317098481.jpg">

        </div>

      </div>





    </div>
    <Footer></Footer>
    <el-dialog title="加入购物车" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <!-- <span>鲜花名称:{{ flowerForm.flowerName }}</span> -->
      <h3>鲜花名称:{{ flowerForm.flowerName }}</h3>
      <h4>数量:{{ number }}</h4>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureForm()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Navbar from "@/components/Navbar.vue";
import Topper from "@/components/Topper.vue";
import Footer from "@/components/Footer.vue";
import List from "@/components/List.vue";
import Breadcrumb from "@/components/Breadcrumb.vue";
import { getById } from "@/api/flower"
import{saveCart} from "@/api/Cart"
export default {
  components: {
    Navbar,
    Topper,
    List,
    Breadcrumb,
    Footer
  },
  data() {
    return {
      dialogVisible: false,
      number: 1,
      flowerForm: {

      },

    };
  },
  methods: {
    toBuy(){
      let params = {
					'outTradeNo':this.flowerForm.flowerId,
					// 'outTradeNo':1,
					// 'subject': this.orders.business.businessName,
					'subject': this.flowerForm.flowerName,
					// "totalAmount": this.orders.orderTotal
					"totalAmount": this.flowerForm.flowerPrice
				}

        // location.href = this.$axios.defaults.baseURL + "server/payment/pcPayment?"+ this.$qs.stringify(params);
        window.open("http://127.0.0.1:9600/server/alipay/pay?subject="+this.flowerForm.flowerName+"&traceNo="+Math.floor(Math.random() * 900000) + 100000+"&totalAmount="+this.flowerForm.flowerPrice*this.number,'_self')


    },
    sureForm(){

      let cartForm = {
        cartImage:this.flowerForm.flowerImg,
        cartName:this.flowerForm.flowerName,
        cartPrice:this.flowerForm.flowerPrice,
        cartNumber:this.number,

      }

      saveCart(cartForm).then((res)=>{
        
      })



      this.dialogVisible = false
      this.$message({
          type: 'success',
          message: '添加成功!'
        });


    },

    addCart() {
      this.dialogVisible = true

    },
    handleClose(done) {

    }
    ,
    init() {
      getById(this.$route.query.flowerId)
        .then((res) => {
          this.flowerForm = res.data
        })
    }
  },
  mounted() {
    this.init();
  },
  watch: {
    number: {
      handler(newVal, oldVal) {

        if (this.number <= 0) {

          this.number = 0;
        }


      }
    }
  }
};
</script>

<style lang="scss">
.details {

  .el-dialog{
    h3{
      margin-bottom: 20px;
    }
  }
  background-color: #f5f5f5;

  .big_flower_details {
    hr {
      border: none;
      /* 移除默认的边框 */
      height: 2px;
      /* 设置水平线的高度 */
      background-color: #884e22;
      /* 设置水平线的颜色 */
      margin: 20px 0;
      /* 设置上下外边距 */
    }

    .flower_details {
      background-color: #ffffff;
      // border:1px solid black;
      margin-left: auto;
      margin-right: auto;
      width: 70%;
      display: flex;

      // align-items: center;

      .flower-image {
        margin: 20px;
      }

      .flower_description {
        span {
          color: #333333;
          font-weight: 700;
        }

        margin-top: 20px;
        font-size: 30px;
        color: #666666;
        flex: 1;
        text-align: left !important;
        margin-left: 40px;

        div {
          margin-top: 40px;

          button {
            width: 30px;
            height: 30px;
          }

          p {
            color: #333333;
          }
        }
      }
    }

    .flower_img {
      background-color: #ffffff;
      margin-left: auto;
      margin-right: auto;
      width: 70%;
      margin-top: 30px;

      .lower_nav {

        height: 50px;
        text-align: left;

        span {
          line-height: 50px;
          // line-height: 50px;
          // text-decoration-line: underline;
          color: #884e22;

        }
      }

      .main_img {
        text-align: center;
      }
    }
  }
}
</style>